<template>
  <el-card>
    <bread-crumb slot="header">
      <template slot="title">发布包子列表</template>
    </bread-crumb>
    <el-form
      ref="publishForm"
      :rules="publishRules"
      :model="params"
      label-width="100px"
      style="margin-left:0px"
    >
      <!-- 表单 -->
      <!-- 标题部分 -->
      <el-form-item prop="name" label="名字">
        <el-input v-model="params.name" style="width:300px"></el-input>
      </el-form-item>
      <!-- 内容部分 -->
      <el-form-item prop="content" label="产品描述">
        <quill-editor
          :options="editorOption"
          style="height:200px"
          v-model="params.title"
          placeholder="请输入内容"
          :rows="5"
          type="textarea"
        ></quill-editor>
      </el-form-item>
      <!-- 封面部分 -->
      <el-form-item style="margin-top:100px" prop="cover" label="图片">
        <!-- 选择图片 -->
        <div class="add_area">
          <div @click="add_image" class="plus_icon">
            <img
              v-if="this.params.file"
              style="width:100%;height:100%;"
              :src="params.file"
              class="preview_img"
            />
            <div class="filediv" ref="file1">
              <input
                ref="file"
                type="file"
                @change="get_file"
                accept="image/*"
                name="imgUrls"
                value="file1"
              />
              <i></i>
              <i></i>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 产品类型部分 -->
      <el-form-item prop="type" label="产品类型">
        <el-radio v-model="params.type" label="3">爆款包子</el-radio>
        <el-radio v-model="params.type" label="1">包子</el-radio>
        <el-radio v-model="params.type" label="0">其他</el-radio>
      </el-form-item>

      <!-- 价格部分 -->
      <el-form-item v-show="Number(params.type) === 3" prop="product_price" label="价格">
        <el-input v-model="params.product_price" style="width:300px"></el-input>
      </el-form-item>
      <!-- 发布文章与存入草稿 按钮 -->
      <el-form-item>
        <el-button @click="saveProduct" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { productAdd } from "../../utils/api";
export default {
  data() {
    return {
      editorOption: {
        placeholder: "输入正文内容",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ header: 1 }, { header: 2 }],
            // [{ list: 'ordered' }, { list: 'bullet' }],
            // [{ script: 'sub' }, { script: 'super' }],
            [{ indent: "-1" }, { indent: "+1" }],
            // [{ direction: 'rtl' }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],
            // ['clean'],
            ["link", "image"]
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          }
          // imageDrop: true,
          // imageResize: {
          //   displayStyles: {
          //     backgroundColor: "black",
          //     border: "none",
          //     color: "white"
          //   },
          //   modules: ["Resize", "DisplaySize", "Toolbar"]
          // }
        }
      },
      publishRules: {
        // 发布规则
        name: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        content: [{ required: true, message: "内容不能为空" }],
        channel_id: [{ required: true, message: "频道不能为空" }],
        type: [{ required: true, message: "请选择类型" }],
        product_price: [{ required: true, message: "请填写价格" }]
      },
      params: {
        name: "",
        title: "",
        type: "1",
        product_placement: "2",
        file: "",
        product_price: ""
      },
      paramsForm: ""
    };
  },
  watch: {
    params: {
      handler(val) {
        this.paramsForm.set("name", val.name);
        this.paramsForm.set("title", val.title);
        this.paramsForm.set("type", val.type);
        this.paramsForm.set("journalism_placement", val.journalism_placement);
        this.paramsForm.set("product_price", val.product_price);
        // console.log(this.paramsForm.get("title"), this.paramsForm.get("content"));
      },
      deep: true
    }
  },
  methods: {
    // 添加新包子
    saveProduct() {
      productAdd(this.paramsForm).then(res => {
        this.$message("添加成功");
        console.log(res.data);
        // this.baozi_display_array_to_show = res.data;
        // this.page.total = res.data.results.length;
      });
    },
    // 获取选择的图片
    get_file() {
      const files = this.$refs.file.files[0];

      this.paramsForm.has("file") &&
        this.paramsForm.set("title", this.params.title);
      if (!this.paramsForm.has("file")) {
        this.paramsForm.append("file", files);
      }
      const imageUrl = URL.createObjectURL(files);
      this.params.file = imageUrl;
      console.log(this.paramsForm.get("file"));
    },
    // 选择图片
    add_image() {
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
      // const temp = {
      //   url:
      //     "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      //   title: "默认",
      //   content: "默认",
      //   price: "默认"
      // };
      // this.hotbaozi_list.push(temp);
    },
    changImg(url, index) {
      // 接收从子组件传来的值
      // 数据经历了两层传递 更改 images 的数据
      this.formData.cover.images = this.formData.cover.images.map(function(
        item,
        i
      ) {
        return index === i ? url : item;
      });
    },
    // radio类型改变事件
    changeType() {
      //   alert(this.formData.cover.type) // 显示当前radio-type选项
      if (this.formData.cover.type === 1) {
        // 当type为1 图片数组有一个
        // image地址不能是本地的图片
        this.formData.cover.images = [
          "http://toutiao.meiduo.site/FmavYB5dTWpnf3X8Uo5eBdK7BRMW"
        ];
      } else if (this.formData.cover.type === 3) {
        // 当type为3 图片数组有三个
        this.formData.cover.images = ["", "", ""];
      } else {
        //   否则图拼啊数组没有值
        this.formData.cover.images = [];
      }
    },
    getChannels() {
      this.$axios({
        url: "/channels"
      }).then(result => {
        // debugger
        this.channels = result.data.data.channels;
      });
    }
  },
  created() {
    this.paramsForm = new FormData();
    this.paramsForm.append("journalism_placement", 1);
    this.paramsForm.append("title", "");
    this.paramsForm.append("type", "");
    this.paramsForm.append("name", "");
    this.paramsForm.append("product_price", "");
    // this.paramsForm.append("file", "");
  }
};
</script>

<style lang="less" scoped>
.add_area {
  width: 100%;
  height: 342px;
  background: #f1f1f1;
  box-sizing: border-box;
  border: 1px dashed #e1e1e1;

  .plus_icon {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    .filediv {
      z-index: 3;
      position: absolute;
      width: 100%;
      height: 100%;
      background: transparent;
      input {
        position: absolute;
        top: 0;
        left: -100%;
      }
      i {
        position: absolute;
        width: 1%;
        height: 30%;
        background: #919191;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        &:last-child {
          transform: translate(-50%, -50%) rotate(90deg);
        }
      }
    }
  }
}
</style>
